<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<title>首页</title>
	<script type="text/javascript" src="../assets/flexible/flexible.debug.js"></script>
	<script type="text/javascript" src="../assets/flexible/flexible_css.debug.js"></script>
	<link rel="stylesheet" type="text/css" href="../assets/swiper/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="../assets/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body>
	<header>
		<div class="top">
			<div class="left"><img src="../images/index/er.png"></div>
			<div class="search">
				<i>
					<img src="../images/index/jing.png">
				</i> 
				<a href="search.html">搜索</a>
			</div>
			<div class="right">
				<a href="Shopping.html">
					<img src="../images/index/che.png">	
				</a>
				
			</div>
		</div>
	</header>
	<main class="main">
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide"><img src="../images/index/不凋谢的花.jpg"></div>
		        <div class="swiper-slide"><img src="../images/index/低调.jpg"></div>
		        <div class="swiper-slide"><img src="../images/index/沉默.jpg"></div>
		        <div class="swiper-slide"><img src="../images/index/滴水.jpg"></div>
				<div class="swiper-slide"><img src="../images/index/祷告.jpg"></div>
				<div class="swiper-slide"><img src="../images/index/碧空.jpg"></div>
		    </div>
		</div>
		<div class="nav">
			<dl>
				<dt><img src="../images/index/shouye-rukou1@2x.png"></dt>
				<dd>胖虎自营</dd>
			</dl>
			<dl>
				<dt><img src="../images/index/shouye-rukou2@2x.png"></dt>
				<dd>达人社区</dd>
			</dl>
			<dl>
				<a href="Talent.html">
				<dt><img src="../images/index/shouye-rukou3@2x.png"></dt>
				<dd>评估鉴定</dd>
				</a>
				
			</dl>
			<dl>
				<dt><img src="../images/index/shouye-rukou4@2x.png"></dt>
				<dd>养护维护</dd>
			</dl>
			<dl>
				<dt><img src="../images/index/shouye-rukou5@2x.png"></dt>
				<dd>胖虎门店</dd>
			</dl>
			<dl>
				<a href="index1.html">
				<dt><img src="../images/index/shouye-rukou6@2x.png"></dt>
				<dd>好店收藏</dd>	
				</a>
				
			</dl>
			<dl>
				<dt><img src="../images/index/shouye-rukou7@2x.png"></dt>
				<dd>领卷中心</dd>
			</dl>
			<dl>
				<dt><img src="../images/index/shouye-rukou8@2x.png"></dt>
				<dd>胖虎管家</dd>
			</dl>
		</div>
		<div class="sale">
			<div class="sle-top"><h2>胖虎特卖</h2><span><img src="../images/index/jian.png"></span></div>
			<div class="slip">
			        <dl class="swiper-slide">
			        	<dt><img src="../images/index/biao.png"></dt>
			        	<dd>
			        		<p>浪琴军旗...</p>
			        		<s>￥9678</s>
			        		<h2>￥8799</h2>
			        	</dd>
			        </dl>
			        <dl class="swiper-slide">
			        	<dt><img src="../images/index/jin.png"></dt>
			        	<dd>
			        		<p>天梭T-CL...</p>
			        		<s>￥9678</s>
			        		<h2>￥8799</h2>
			        	</dd>
			        </dl>
			        <dl class="swiper-slide">
			        	<dt><img src="../images/index/yuan.png"></dt>
			        	<dd>
			        		<p>卡地亚DR...</p>
			        		<s>￥9678</s>
			        		<h2>￥8799</h2>
			        	</dd>
			        </dl>
			        <dl class="swiper-slide">
			        	<dt><img src="../images/index/ku.png"></dt>
			        	<dd>
			        		<p>GUCCI...</p>
			        		<s>￥9678</s>
			        		<h2>￥8799</h2>
			        	</dd>
			        </dl>
					<dl class="swiper-slide">
						<dt><img src="../images/index/black.png"></dt>
						<dd>
							<p>浪琴军旗...</p>
			        		<s>￥9678</s>
			        		<h2>￥8799</h2>
						</dd>
					</dl>
			</div>
		</div>
		<div class="session">
			<div class="sen-top">
				<h2>限时抢<span>·</span>周日十点专场</h2>
				<h3>距开始<span>1天08:50:02</span></h3>
				<span><img src="../images/index/jian.png"></span>
			</div>
			<div class="sen-main">
				<dl>
					<dt><img src="../images/index/watch1.png" alt=""></dt>
					<dd>￥78952</dd>
				</dl>
				<dl>
					<dt><img src="../images/index/watch2.png" alt=""></dt>
					<dd>￥78952</dd>
				</dl>
				<dl>
					<dt><img src="../images/index/watch3.png" alt=""></dt>
					<dd>￥78952</dd>
				</dl>
				<dl>
					<dt><img src="../images/index/watch4.png" alt=""></dt>
					<dd>￥78952</dd>
				</dl>
				<dl>
					<dt><img src="../images/index/watch5.png" alt=""></dt>
					<dd>￥78952</dd>
				</dl>
			</div>
		</div>
		<div class="gray"></div>
		<div class="tu">
			<img src="../images/index/d1.png" alt="">
			<img src="../images/index/d2.png" alt="" class="a">
			<img src="../images/index/d3.png" alt="">
		</div>
		<section class="container">
			<div class="swiper-container-list nav-list">
				<div class="swiper-wrapper">
					<div class="swiper-slide active-nav">精选</div>
					<div class="swiper-slide">度假</div>
					<div class="swiper-slide">亲子</div>
					<div class="swiper-slide">浪漫</div>
					<div class="swiper-slide">美食</div>
					<div class="swiper-slide">美景</div>
					<div class="swiper-slide">格调</div>
					<div class="swiper-slide">泡汤</div>
				</div>
			</div>
			<section class="swiper-container-opts">
				<figure class="swiper-wrapper">
					<figure class="swiper-slide one">
						<dl>
							<dt><img src="../images/index/b1.png" alt=""></dt>
							<dd>
								<p>Dior五格戴妃包刺绣盾牌限量版，92新，边角合金</p>
								<h2>￥78952</h2>
							</dd>
						</dl>
						<dl>
							<dt><img src="../images/index/b2.png" alt=""></dt>

							<dd><p>Dior五格戴妃包刺绣盾牌限量版，92新，边角合金</p><h2>￥78952</h2></dd>
						</dl>
						<dl>
							<dt><img src="../images/index/b2.png" alt=""></dt>
							<dd><p>Dior五格戴妃包刺绣盾牌限量版，92新，边角合金</p><h2>￥78952</h2></dd>
						</dl>
						<dl>
							<dt><img src="../images/index/b1.png" alt=""></dt>
							<dd><p>Dior五格戴妃包刺绣盾牌限量版，92新，边角合金</p><h2>￥78952</h2></dd>
						</dl>
					</figure>
					<figure class="swiper-slide">slide - two</figure>
					<figure class="swiper-slide">slide - three</figure>
					<figure class="swiper-slide">slide - four</figure>
					<figure class="swiper-slide">slide - five</figure>
					<figure class="swiper-slide">slide - six</figure>
					<figure class="swiper-slide">slide - seven</figure>
					<figure class="swiper-slide">slide - eight</figure>
				</figure>
			</section>
	</main>
	<footer>
		<dl>
			<a href="index.html">
				<dt>
					<img src="../images/index/dibu-icon1-xuanzhong@2x.png">
				</dt>
				<dd class="footer_on">首页</dd>
			</a>
		</dl>
		<dl>

				<dt>
					<img src="../images/index/dibu-icon2-weixuanzhong@2x.png" alt="">
				</dt>
				<dd>买</dd>
			
		</dl>
		<dl>
			<a href="#">
				<img src="../images/index/dibu-icon3@2x.png" alt="" class="jia">
			</a>
		</dl>
		<dl>
			<a href="news.html">
				<dt>
					<img src="../images/index/dibu-icon4-weixuanzhong@2x.png" alt="">
				</dt>
				<dd>消息</dd>
			</a>
		</dl>
		<dl>
			<a href="my.html">
				<dt>
					<img src="../images/index/dibu-icon5-weixuanzhong@2x.png" alt="">
				</dt>
				<dd>我的</dd>
			</a>
		</dl>
	</footer>
	<script src="../assets/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../assets/swiper/js/swiper.js"></script>
	<script type="text/javascript">
		 var mySwiper = new Swiper ('.swiper-container', {
		   /* direction: 'vertical',*/
		   autoplay : 1000,
		    loop: true,
			slidesPerView : 1,
		   })
	</script>
	<script type="text/javascript">
		var mySwiper = new Swiper('.slip',{
			 autoplay : false,
			slidesPerView :5,
			slidesPerGroup : 1,
            onTransitionEnd: function(swiper){
                if(swiper.progress==1){
                    swiper.activeIndex=swiper.slides.length-1
                }
            }
		})
	</script>
	<script type="text/javascript">
        var Swiper_active1 = $('.swiper-container-list .active-nav'),
            Swiper_slide1 = $('.swiper-container-list .swiper-slide');
        var _mySwiperlist = new Swiper('.swiper-container-list', {
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
            slidesPerView: 6,
            onTap: function() {
                _mySwiperopts.slideTo(_mySwiperlist.clickedIndex)
            }
        })
        var _mySwiperopts = new Swiper('.swiper-container-opts', {
            onSlideChangeStart: function() {
                updateNavPosition(Swiper_active1, Swiper_slide1, _mySwiperopts, _mySwiperlist)
            }
        })

        function updateNavPosition(Swiper_active, Swiper_slide, mySwiper, mySwiper_list) {
            Swiper_active.removeClass('active-nav')
            var activeNav = Swiper_slide.eq(mySwiper.activeIndex).addClass('active-nav');
            activeNav.siblings().removeClass("active-nav");
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() > mySwiper_list.activeIndex) {
                    var thumbsPerNav = Math.floor(mySwiper_list.width / activeNav.width()) - 1
                    mySwiper_list.slideTo(activeNav.index() - thumbsPerNav)
                } else {
                    mySwiper_list.slideTo(activeNav.index())
                }
            }
        }

	</script>
</body>
</html>